<template>
  <md-page title="我的积分" isRefresh @pullDownRefresh="handlePullDownRefresh">
    <view class="container">
      <view class="card">
        <view class="title-wrap">
          <view class="title">剩余积分：{{ data.scoreInfo.total_score }}</view>
          <view class="record-btn" @click="handleRecord">
            <text class="record-text">兑换记录</text>
          </view>
        </view>
        <view class="tags m-bottom-30 m-top-12">积分可在终点兑换礼品</view>
        <!-- 二维码 -->
        <view class="code-wrap">
          <view class="left-title">积分核销二维码</view>
          <view class="code-content flex-c">
            <ikun-qrcode width="390" height="390" unit="rpx" color="#000000" :data="data.url" />
            <view class="code-tip">
              重要提醒：请勿随意出示积分二维码，谨防误扫，核销后积分无法退回。
            </view>
          </view>
        </view>
      </view>
    </view>
  </md-page>
</template>

<script lang="ts" setup>
import { myScoreInfo } from '@/api';
import { onLoad } from '@dcloudio/uni-app';
import { reactive } from 'vue';
const data = reactive<any>({
  configInfo: {},
  scoreInfo: {},
  url: '',
});

const handleRecord = () => {
  uni.navigateTo({ url: '/pages/other/points/list?type=my' });
};

/**
 * 接口相关
 */
// 获取我的积分信息
const fetchGetScoreInfo = async () => {
  try {
    const res = await myScoreInfo();
    data.scoreInfo = res.data;
    data.url = '/pages/other/points/verification?qr_data=' + res.data.qr_data;
  } catch (error) {}
};

onLoad(async option => {
  const configInfo = uni.getStorageSync('configInfo') ? JSON.parse(uni.getStorageSync('configInfo')) : '';
  if (configInfo) {
    data.configInfo = configInfo;
  }
  fetchGetScoreInfo();
});

/**
 * 下拉刷新
 */
const handlePullDownRefresh = () => {
  fetchGetScoreInfo();
};
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
  & > .card {
    padding: 26rpx 30rpx;
    box-sizing: border-box;
    background: white;
    & > .title-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    & > .title {
      font-weight: bold;
      font-size: 40rpx;
    }
    & > .tags {
      display: flex;
      align-items: center;
      gap: 20rpx;
      .tag {
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        border-radius: 10rpx;
        padding: 0 18rpx;
        box-sizing: border-box;
        opacity: 0.9;
        color: white;
        &.zhuti {
          background: $primary;
        }
        &.daka {
          background: #eca342;
        }
        &.buji {
          background: #e64627;
        }
      }
    }
  }
  .code-wrap {
    display: flex;
    width: 100%;
    height: 460rpx;
    border-radius: 20rpx;
    overflow: hidden;
    & > .left-title {
      font-size: 34rpx;
      font-weight: bold;
      width: 80rpx;
      background: $primary;
      color: white;
      text-align: center;
      padding: 14rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
    }
    & > .code-content {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      background: #f7f7f7;
      flex-direction: column;
      gap: 20rpx;
      .code-image {
        width: 390rpx;
        height: 390rpx;
        background: white;
      }
      .code-tip {
        font-size: 24rpx;
        color: #d92121;
        text-align: center;
        line-height: 1.5;
        padding: 0 30rpx 30rpx;
      }
    }
  }
  .buji-wrap {
    width: 100%;
    background: #f7f7f7;
    border-radius: 20rpx;
    overflow: hidden;
    display: flex;
    align-items: center;
    & > .left-title {
      font-size: 34rpx;
      font-weight: bold;
      width: 80rpx;
      background: #1cc0b2;
      color: white;
      text-align: center;
      padding: 14rpx;
      box-sizing: border-box;
      height: 100%;
    }
    & > .content {
      flex: 1;
      font-size: 34rpx;
      font-weight: bold;
      text-align: center;
    }
    & > .code {
      margin: 0 30rpx;
    }
  }
  .record-btn {
    display: flex;
    align-items: center;
    .record-text {
      font-size: 32rpx;
      font-weight: 600;
      color: $warn;
      transition: all 0.2s ease;
      &:active {
        opacity: 0.7;
        transform: scale(0.98);
      }
    }
  }
}

.pop_content {
  background: white;
  width: 410rpx;
  height: 410rpx;
  padding: 10rpx;
}
</style>
